<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<script src="${request.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${request.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${request.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${request.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${request.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${request.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${request.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${request.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${request.contextPath}/assets/js/user/base.js"></script>
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.7.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${request.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
        <link rel="stylesheet" href="${request.contextPath}/stylesheets/loading.css" />
		<!-- ace settings handler -->
		<script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bsie-paginator.css" />
	</head>
    <style>
        #nps-question-details th{text-align:center;}
    </style>
	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
		<div class="tab-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<div class="form-inline">
									<div class="form-group">
										<label>选择时段</label>
										<input type="text" id="selectedTime" name="selectedTime" class="form-control time">
									</div>
                                    <div class="form-group" style="margin-left: 30px;">
                                        <label>类型</label>
                                        <select data-placeholder="" class="chosen-select" tabindex="2" id="npsQuestionType" name="npsQuestionType" style="width:85px">
                                            <#list npsQuestionTypes as npsQuestionType>
                                                <option  value="${npsQuestionType.code}">${npsQuestionType.showName!""}</option>
                                            </#list>
                                        </select>
                                    </div>
									<div class="form-group" style="margin-left: 30px;" id="orderTypeDiv">
										<label>订单品类</label>
										<select class="chosen-select" data-placeholder="" id="categoryId" name="categoryId">
											<#list categories as cate>
												<option  value="${cate.value}" >${cate.showName!""}</option>
											</#list>
										</select>
									</div>
									<div class="form-group" style="margin-left: 30px;" id="orderStateDiv">
										<label>订单状态</label>
										<select data-placeholder="" class="chosen-select" tabindex="2" id="commitType" name="commitType" style="width:85px">
											<#list orderTypes as orderType>
                                                <option  value="${orderType.code}">${orderType.showName!""}</option>
											</#list>
										</select>
									</div>
									<div class="form-group" style="margin-left: 100px;">
									  	<button id="search" type="button" class="btn btn-pink btn-sm">
											<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
											Search
										</button>
									</div>
									<div class="form-group" style="margin-left: 10px;">
									  	<button id="export" type="button" class="btn btn-pink btn-sm">
											<span class="ace-icon fa icon-on-right bigger-110"></span>
											导出excel
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
            <!--筛选统计开始-->
            <div class="row">
                <div class="infobox infobox-green infobox-small infobox-dark col-md-2" style="margin-left: 15px;">
                    <div class="infobox-progress">
                        <div class="easy-pie-chart percentage" data-percent="" data-size="39">
                            <span class="percent"></span>%
                        </div>
                    </div>
                    <div class="infobox-data">
                        <div class="infobox-content">NPS</div>
                    </div>
                </div>

                <div class="infobox infobox-small infobox-dark col-md-2" style="margin-left: 40px;background-color: #666666;">
                    <div class="infobox-icon">
                        <i class="ace-icon fa fa-thumbs-o-down bigger-230"></i>
                    </div>
                    <div class="infobox-data">
                        <div class="infobox-content">贬低者</div>
                        <div class="infobox-content" id="detractor"></div>
                    </div>
                </div>

                <div class="infobox infobox-small infobox-dark col-md-2" style="margin-left: 40px;background-color: #5CA2F8;">
                    <div class="infobox-icon">
                        <i class="ace-icon glyphicon glyphicon-adjust bigger-230"></i>
                    </div>
                    <div class="infobox-data">
                        <div class="infobox-content">被动者</div>
                        <div class="infobox-content" id="passives"></div>
                    </div>
                </div>

                <div class="infobox infobox-small infobox-dark col-md-2" style="margin-left: 40px;background-color: #FE3C71;">
                    <div class="infobox-icon">
                        <i class="ace-icon fa fa-thumbs-o-up bigger-230"></i>
                    </div>
                    <div class="infobox-data">
                        <div class="infobox-content">推荐者</div>
                        <div class="infobox-content" id="presenter"></div>
                    </div>
                </div>
            </div>
            <!--筛选统计结束-->
            <div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="row">
							<div class="col-xs-12">
								<div id="nps-question-details" style="width: 100%; margin: 0 auto;">
									<table id="nps-questionnaire-table" class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;border-bottom: 0px;">
										<thead>
										</thead>
                                        <!--表格内容-->
										<tbody></tbody>
									</table>
									<!--分页开始-->
                                    <div class="ui-jqgrid">
                                        <div id="grid-pager"
                                             class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
                                            <div id="pg_grid-pager" class="ui-pager-control" role="group">
                                                <table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
                                                       style="width: 100%; table-layout: fixed; height: 100%;" role="row">
                                                    <tbody>
                                                        <tr>
                                                            <td id="grid-pager_left" align="left"></td>
                                                            <td id="grid-pager_center" align="center"
                                                                style="white-space: pre; width: 343px;"><table
                                                                    cellspacing="0" cellpadding="0" border="0"
                                                                    style="table-layout: auto;" class="ui-pg-table">
                                                                <tbody>
                                                                <tr>
                                                                    <td id="first_grid-pager" class="ui-pg-button ui-corner-all"
                                                                        style="cursor: pointer;"><span attr="first"
                                                                            class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
                                                                    <td id="prev_grid-pager" class="ui-pg-button ui-corner-all"
                                                                        style="cursor: pointer;"><span attr="pre"
                                                                            class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
                                                                    <td dir="ltr">Page <input class="ui-pg-input" type="text"
                                                                                              size="2" role="textbox"> of <span
                                                                            id="sp_1_grid-pager"></span></td>
                                                                    <td id="next_grid-pager" class="ui-pg-button ui-corner-all"
                                                                        style="cursor: pointer;"><span attr="next"
                                                                            class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
                                                                    <td id="last_grid-pager" class="ui-pg-button ui-corner-all"
                                                                        style="cursor: pointer;"><span attr="last"
                                                                            class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
                                                                </tr>
                                                                </tbody>
                                                            </table></td>
                                                            <td id="grid-pager_right" align="right"><div id="pagerView" dir="ltr"
                                                                                                         style="text-align: right" class="ui-paging-info"></div></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
									<!--分页结束-->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
        </div>
		<script src="${request.contextPath}/assets/js/moment.min.js"></script>
		<script src="${request.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		
		<link rel="stylesheet" href="${request.contextPath}/stylesheets/daterangepicker.css">
		<script type="text/javascript" src="${request.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
	   	<script type="text/javascript" src="${request.contextPath}/javascripts/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="${request.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${request.contextPath}/javascripts/daterangepicker.js"></script>
        <script type="text/javascript" src="${request.contextPath}/javascripts/loading.js"></script>
	   	<script type="text/javascript" src="${request.contextPath}/javascripts/echarts.js"></script>
        <script src="${request.contextPath}/assets/js/jquery.easypiechart.min.js"></script>
	   	<script type="text/javascript" src="${request.contextPath}/javascripts/china.js"></script>
	   	<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
        <script src="${request.contextPath}/assets/js/d3.v3.min.js"></script>
		<script type="text/javascript">
            d3.select(self.frameElement).style("height", "1000px");
            //页面初始化查询数据
            window.onload = function () {
                $("#search").click();
            };
		function replaceDate(obj){
    		if(obj == '1'){
    			startDate = new Date(new Date().getTime()-7*1000*60*60*24);
	    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
    		}else if(obj == '2'){
    			startDate = new Date(new Date().getTime()-14*1000*60*60*24);
	    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
    		}
		 	var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
		    $("#chooseTimeVO").val(dateStr);
		    $(".time").val(dateStr);
    	}
		
        function dateFormat(date){
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = month + "/" + strDate + "/" + date.getFullYear();
            return currentdate;
        }
        jQuery(function($) {
            $('.time').daterangepicker(
                    {
                        startDate: new Date(new Date().getTime()-1*1000*60*60*24),
                        endDate: new Date(new Date().getTime()-1*1000*60*60*24),
                        showDropdowns : true,
                        showWeekNumbers : false,
                        timePicker : false,
                        timePicker12Hour : false,
                        ranges : {
                            '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            '过去7天': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                            '过去31天': [moment().subtract(31, 'days'), moment().subtract(1, 'days')]
                        },
                        opens : 'right',
                        buttonClasses : [ 'btn btn-default' ],
                        applyClass : 'btn-small btn-pink blue',
                        cancelClass : 'btn-small',
                        format : 'yyyy-MM-dd',
                        separator : ' to ',
                        locale : {
                            applyLabel : '确定',
                            cancelLabel : '取消',
                            fromLabel : '起始时间',
                            toLabel : '结束时间',
                            customRangeLabel : '自定义',
                            daysOfWeek : [ '日', '一', '二', '三', '四', '五',
                                    '六' ],
                            monthNames : [ '一月', '二月', '三月', '四月', '五月',
                                    '六月', '七月', '八月', '九月', '十月', '十一月',
                                    '十二月' ],
                            firstDay : 1
                        }
                    },
                    function(start, end, label) {//格式化日期显示框

                        $('.time').html(
                                start.format('yyyy-MM-dd') + ' - '
                                        + end.format('yyyy-MM-dd'));
                    });

        });
        var firstPage;
        var prePage;
        var nextPage;
        var lastPage;
        var query = function (currentPage) {
            $("#search").attr("disabled", true);
            $("#nps-questionnaire-table thead").empty();
            $("#nps-questionnaire-table tbody").empty();
            //获取查询条件
            var selectedTime = $('#selectedTime').val();
            var startTime;
            var endTime;
            if(selectedTime){
                startTime = selectedTime.split('-')[0];
                endTime = selectedTime.split('-')[1] + ' 23:59:59';
            }
            var commitType = $('#commitType').val();
            var categoryId = $('#categoryId').val();
            var npsQuestionType = $('#npsQuestionType').val();
            //查询nps的统计数据
            $.ajax({
                url:'${request.contextPath}/nps/npsStatistics',
                dataType:'json',
                type:'GET',
                data:{
                    startTime : startTime,
                    endTime : endTime,
                    orderState : commitType,
                    categoryId : categoryId,
                    npsQuestionType : npsQuestionType
                },
                success:function (statistics) {
                    $('.percent').text(statistics.data.nps);
                    $('.easy-pie-chart.percentage').attr('data-percent',statistics.data.nps);
                    $('#detractor').text(statistics.data.detractor);
                    $('#passives').text(statistics.data.passives);
                    $('#presenter').text(statistics.data.presenter);
                },
                complete: function () {
                    //画easy chart
                    $('.easy-pie-chart.percentage').each(function(){
                        var $box = $(this).closest('.infobox');
                        var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
                        var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
                        var size = parseInt($(this).data('size')) || 50;
                        $(this).easyPieChart({
                            barColor: barColor,
                            trackColor: trackColor,
                            scaleColor: false,
                            lineCap: 'butt',
                            lineWidth: parseInt(size/10),
                            animate: ace.vars['old_ie'] ? false : 1000,
                            size: size
                        });
                    });
                }
            });
            //查询分页
            $.ajax({
                url:'${request.contextPath}/nps/list',
                dataType:'json',
                type:'GET',
                data:{
                    currentPage : currentPage,
                    startTime : startTime,
                    endTime : endTime,
                    orderState : commitType,
                    categoryId : categoryId,
                    npsQuestionType : npsQuestionType
                },
                beforeSend: function(){
                    openPartialLayer($("#nps-question-details"));
                },
                success:function (page) {
                    //设置分页栏信息
                    $('#pagerView').text('View ' + page.data.startRow + ' - ' + page.data.endRow + ' of ' + page.data.total);
                    $('.ui-pg-input').val(page.data.pageNum);
                    var html = '';
                    if(page && page.data.pages>0){
                        firstPage = 1;
                        prePage = page.data.prePage;
                        nextPage = page.data.nextPage;
                        lastPage = page.data.pages;
                        var flag = true;
                        //把数据遍历显示
                        $.each(page.data.list, function (index, item) {
                            //var remark = getRemark(item);
                            if(item.npsQuestionType==='1'){
                                flag = false;
                                html += '<tr>'+
											'<td>' + item.id + '</td>' +
											'<td>' + item.surveyNo + '</td>' +
											'<td>' + item.commitTime + '</td>' +
											'<td>' + item.scoreStyle + '</td>' +
                                            '<td>' + item.remark + '</td>' +
										'</tr>';
							}else {
                                html += '<tr>'+
                                            '<td>' + item.id + '</td>' +
                                            '<td>' + item.commitTime + '</td>' +
                                            '<td>' + item.userId + '</td>' +
                                            '<td>' + item.phoneNumber + '</td>' +
                                            '<td>' + item.categoryName + '</td>' +
                                            '<td>' + item.orderId + '</td>' +
                                            '<td>' + item.commitType + '</td>' +
                                            '<td>' + item.scoreStyle + '</td>' +
                                            '<td>' + item.remark + '</td>' +
                                        '</tr>';
                            }
                        });
                        $(".ui-jqgrid").show();
                        //更改翻页按钮样式
                        if(page.data.pageNum == 1){
                            $('#first_grid-pager,#prev_grid-pager').addClass('ui-state-disabled').css('pointer-events', 'none');
                        }else{
                            $('#first_grid-pager,#prev_grid-pager').removeClass('ui-state-disabled').removeAttr('style').css('cursor','pointer');
                        }
                        if(page.data.pageNum == page.data.pages){
                            $('#next_grid-pager,#last_grid-pager').addClass('ui-state-disabled').css('pointer-events', 'none');
                        }else{
                            $('#next_grid-pager,#last_grid-pager').removeClass('ui-state-disabled').removeAttr('style').css('cursor','pointer');
                        }
                    }else {
                        $('.ui-jqgrid').hide();
                        //没有数据
                        html= '<tr>'+
                                  '<td colspan="12">' +
                                    '<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>' +
                                  '</td>' +
                              '</tr>';
                    }
                    var title = '';
                    if(flag){
                        title = '<tr>' +
                                    '<th>编号</th>' +
                                    '<th>提交时间</th>' +
                                    '<th>会员ID</th>' +
                                    '<th>手机号</th>' +
                                    '<th>品类</th>' +
                                    '<th>订单ID</th>' +
                                    '<th>提交时状态</th>' +
                                    '<th>分值</th>' +
                                    '<th>备注</th>' +
                                '</tr>';
                    }else {
                        title = '<tr>' +
                                    '<th style="width:150px;">编号</th>' +
                                    '<th style="width:150px;">问卷编号</th>' +
                                    '<th style="width:150px;">提交时间</th>' +
                                    '<th style="width:100px;">分值</th>' +
                                    '<th style="width:300px;">备注</th>' +
                                '</tr>';
                    }
                    $("#nps-questionnaire-table thead").html(title);
                    $("#nps-questionnaire-table tbody").html(html);
                },
                complete: function () {
                    $("#search").attr("disabled", false);
                    removeLoading($("#nps-question-details"));
                }
            });
        };
        var customPageFlag = false;
        //支持自定义输入页码
        $('.ui-pg-input').change(function () {
            customPageFlag = true;
        });
        //搜索
        $("#search").click(function () {
            if(customPageFlag){
                var curPage = $('.ui-pg-input').val();
                if(curPage && curPage > 0){
                    query(curPage);
                    customPageFlag = false;
                    return;
                }
            }
            query(1);
        });
        //翻页
        $('.ui-icon.ace-icon.fa').click(function () {
            var pager = $(this).attr('attr');
            if(pager === 'first'){
                query(firstPage);
            }else if(pager === 'pre'){
                query(prePage)
            }else if(pager === 'next'){
                query(nextPage)
            }else if(pager === 'last'){
                query(lastPage);
            }
        });
        //导出excel
        $('#export').click(function () {
            //获取查询条件
            var selectedTime = $('#selectedTime').val();
            var startTime;
            var endTime;
            if(selectedTime){
                startTime = selectedTime.split('-')[0];
                endTime = selectedTime.split('-')[1] + ' 23:59:59';
            }
            var commitType = $('#commitType').val();
            var categoryId = $('#categoryId').val();
            var npsQuestionType = $('#npsQuestionType').val();

            //导出
            window.location.href = '${request.contextPath}/nps/exportQuestionnaire?startTime='
            + startTime + '&endTime=' + endTime + '&orderState=' + commitType + '&categoryId=' + categoryId
            +'&npsQuestionType=' + npsQuestionType;
        });
        //回车查询
        $(window).keydown(function(event){
            if(event.keyCode === 13) {
                $("#search").click();
            }
        });
        //类型change
        $('#npsQuestionType').change(function () {
            var type = $(this).val();
            if(type==='1'){
                $('#orderTypeDiv').hide();
                $('#orderStateDiv').hide();
            }else {
                $('#orderTypeDiv').show();
                $('#orderStateDiv').show();
            }
        });

		</script>
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.css" />
		<script src="${request.contextPath}/assets/js/chosen.jquery.js"></script>
		<script>
			 $(function() {
		        $('.chosen-select').chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
                //tooltip
                $('[data-rel=tooltip]').tooltip();
             });
	    </script>
	</body>
</html>